<template>
	<div class="aid">
		<div class="base">
			<a-spin class="spin" size="large" v-if="spinshow"><div class="spin-content"></div></a-spin>
			<p class="fixed-top">
				活动信息
				<a-icon @click="closeFunction()" type="close" />
			</p>
			<div class="main">
				<a-timeline style="padding-top: 10px;overflow-y: auto;padding-bottom: 50px;">
					<a-timeline-item>
						<h4 style="color: #1890ff;">基础信息</h4>
						<a-list class="followListArea" size="small" bordered :data-source="detailList">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div style="width: 124px">{{ item.key }} :</div>
								<div style="flex: 1;text-align: left;">{{ item.val }}</div>
							</a-list-item>
						</a-list>
					</a-timeline-item>
					<h4 style="margin: 15px 0;" v-if="flowData.length>0">审核流程</h4>
					<a-timeline-item v-for="(v, i) of flowData" :key="v.ID">
						<h4 class="gj" :style="{ color: '#1890ff' }">
							<div class="followContent">{{ v.FlowTypeName }}</div>
						</h4>
						<h4 v-if="v.IsAdopt==null" class="gj" style="display: flex">审核中</h4>
						<h4 v-if="v.IsAdopt!=null" class="gj" style="display: flex">
							<div>
								<div class="tit">审核人：</div>
								<div class="cell">{{ v.ExamUserName }}</div>
								&nbsp;&nbsp;
								<div class="tit">审核时间：</div>
								<div class="cell">{{ v.ExamTime }}</div>
							</div>
						</h4>
						<h4 v-if="v.IsAdopt!=null" class="gj" style="display: flex">
							<div>
								<div class="tit">审核状态：</div>
								<div class="cell">{{ v.IsAdopt?'通过':'驳回' }}</div>
								&nbsp;&nbsp;
								<div class="tit">审核内容：</div>
								<div class="cell">{{ v.ExamComment }}</div>
							</div>
						</h4>
					</a-timeline-item>
					<h4 style="margin: 15px 0;" v-if="ActivitySignList.length>0">签到/签退</h4>
					<a-timeline-item v-for="(v,index) in ActivitySignList" :key="index">
						<h4 class="gj" :style="{ color: '#1890ff' }">
							<div class="followContent">{{ v.TypeName }}</div>
						</h4>
						<h4 v-if="v.IsAdopt!=null" class="gj" style="display: flex">
							<div>
								<div class="tit">添加人：</div>
								<div class="cell">{{ v.AddUserName }}</div>
								&nbsp;&nbsp;
								<div class="tit">添加时间：</div>
								<div class="cell">{{ v.AddTime }}</div>
							</div>
						</h4>
						<h4 class="gj" style="display: flex">
							<div>
								<div class="tit">已签：</div>
								<div class="cell" @click="clickHandler(v,'signIndex')">{{ v.SignNum+'人，点击查看' }}</div>
								&nbsp;&nbsp;
								<div class="tit">未签：</div>
								<div class="cell" @click="clickHandler(v,'noSignIndex')">{{ v.NoSignNum+'人，点击查看' }}</div>
							</div>
						</h4>
					</a-timeline-item>
				</a-timeline>
				<div class="fixed-bottom">
					<div style="display: flex;">
						<div style="flex: 1;"></div>
						<a-button @click="closeFunction">取消</a-button>
					</div>
				</div>
				<!--图片预览-->
				<a-modal v-if="previewVisible" :visible="previewVisible" :width="816" :footer="null" @cancel="previewVisible = false">
					<div style="height: 24px;"></div>
					<div style="width: 768px;"><img style="width: 100%" :src="previewImage" /></div>
				</a-modal>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import { getActivityDetail,getActivitySignList  } from '@/api/follow';
export default {
	components: {},
	props: {
		text: Object,
	},
	watch: {
		text: function(text) {
			this.followPage(text.ID);
		},
	},
	data() {
		return {
			spinshow: true,
			detail: {},
			detailList:[],
			flowData:[],
			ActivitySignList:[],
			previewVisible: false,
			previewImage: '',
		};
	},
	created() {
		// this.followPage('97b27546c76441cb9694b07e6ddb4cf4');
	},
	methods: {
		closeFunction(flag) {
			this.detailList = [];
			this.spinshow = true;
			this.$emit('closeFun', flag);
		},
		moment,
		handlePreview(item) {
			this.previewImage = this.loadUrl + item.Url;
			this.previewVisible = true;
		},
		async followPage(id) {
			let res = await getActivityDetail({ id: id });
			this.detail = res.data.data
			let {
					No,
					ClubID,
					ClubName,
					ClassID,
					ClassName,
					TypeName,
					Title,
					ApplyIsNeedExam,
					TypeItemName,
					IsNeedApply,
					ApplyStartTime,
					ApplyEndTime,
					IsHasPrize,
					StartTime,
					EndTime,
					ChargeUserName,
					ChargeUserNo,
					PeopleNum,
					MemberNum,
					HourNum,
					IsNeedActivityJob,
					HonestyScore
				} = res.data.data;
			let middleKey = []
			let miidle = []
			if (this.detail.ClassID) {
				if (this.detail.HourNum) {
					middleKey = ['编号','学生组织/班级', '活动类型', '活动标题', '活动时长（h）', '负责人', '活动时间', '成员数'];
					miidle = [No||'暂无',ClubName || ClassName, TypeName, TypeItemName, HourNum, ChargeUserName + ' / ' + ChargeUserNo, StartTime + ' - ' + EndTime, MemberNum];
				} else {
					middleKey = ['编号','学生组织/班级', '活动类型', '活动标题', '负责人', '活动时间', '成员数'];
					miidle = [No||'暂无',ClubName || ClassName, TypeName, TypeItemName, ChargeUserName + ' / ' + ChargeUserNo, StartTime + ' - ' + EndTime, MemberNum];
				}
			} else {
				if (this.detail.HourNum) {
					middleKey = [
						'编号',
						'学生组织/班级',
						'活动类型',
						'活动标题',
						'诚信值',
						'是否需要提交作业',
						'活动时长（h）',
						'负责人',
						'是否需要报名',
						'报名时间',
						'参加活动是否需要审批',
						'是否设置奖项',
						'活动时间',
						'活动人数',
						'成员数'
					];
					miidle = [
						No||'暂无',
						ClubName || ClassName,
						TypeName,
						Title,
						HonestyScore,
						IsNeedActivityJob? '是' : '否',
						HourNum,
						ChargeUserName + ' / ' + ChargeUserNo,
						IsNeedApply ? '是' : '否',
						IsNeedApply ? ApplyStartTime + ' - ' + ApplyEndTime:'无需报名',
						ApplyIsNeedExam ? '是' : '否',
						IsHasPrize ? '是' : '否',
						StartTime + ' - ' + EndTime,
						PeopleNum == -1 ? '不限' : PeopleNum,
						MemberNum
					];
				} else {
					middleKey = [
						'编号',
						'学生组织/班级',
						'活动类型',
						'活动标题',
						'诚信值',
						'是否需要提交作业',
						'负责人',
						'是否需要报名',
						'报名时间',
						'参加活动是否需要审批',
						'是否设置奖项',
						'活动时间',
						'活动人数',
						'成员数'
					];
					miidle = [
						No||'暂无',
						ClubName || ClassName,
						TypeName,
						Title,
						HonestyScore,
						IsNeedActivityJob? '是' : '否',
						ChargeUserName + ' / ' + ChargeUserNo,
						IsNeedApply ? '是' : '否',
						IsNeedApply ? ApplyStartTime + ' - ' + ApplyEndTime:'无需报名',
						ApplyIsNeedExam ? '是' : '否',
						IsHasPrize ? '是' : '否',
						StartTime + ' - ' + EndTime,
						PeopleNum == -1 ? '不限' : PeopleNum,
						MemberNum
					];
				}
			}
			// if(this.detail.HourNum){
			// 	middleKey = ['学生组织/班级','活动类型','活动标题','活动时长（h）','负责人','参加活动是否需要审批','是否需要报名','是否设置奖项','活动时间','活动人数','成员数'];
			// 	miidle = [ClubName||ClassName,TypeName,Title,HourNum,ChargeUserName+' / '+ChargeUserNo,ApplyIsNeedExam?'需要审批':'不需要审批',IsNeedApply?'是':'否',IsHasPrize?'是':'否',StartTime+' - '+EndTime,PeopleNum==-1?'不限':PeopleNum,MemberNum];
			// }else{
			// 	middleKey = ['学生组织/班级','活动类型','活动标题','负责人','参加活动是否需要审批','是否需要报名','是否设置奖项','活动时间','活动人数','成员数'];
			// 	miidle = [ClubName||ClassName,TypeName,Title,ChargeUserName+' / '+ChargeUserNo,ApplyIsNeedExam?'需要审批':'不需要审批',IsNeedApply?'是':'否',IsHasPrize?'是':'否',StartTime+' - '+EndTime,PeopleNum==-1?'不限':PeopleNum,MemberNum];
			// }
			this.detailList = miidle.map((v, i) => {
				return {
					key: middleKey[i],
					val: v
				};
			});
			// let {
			// 		data: { Title, ClubName,ChargeUserName,ChargeUserNo,StartTime,EndTime,TypeName,MemberNum}
			// 	} = res.data;
			// let middleKey = ['名称','类型','所属学生组织','负责人','时间','参与人数'];
			// let miidle = [Title,TypeName,ClubName,ChargeUserName+' / '+ChargeUserNo,StartTime+' - '+EndTime,MemberNum];
			// this.detailList = miidle.map((v, i) => {
			// 	return {
			// 		key: middleKey[i],
			// 		val: v
			// 	};
			// });
			this.flowData = res.data.flowData
			let res1 = await getActivitySignList({activityID:id})
			this.ActivitySignList = res1.data.data
			this.spinshow = false;
		},
		clickHandler(item,path){
			this.$router.push({
				name: path,
				query: {
					ID: item.ID
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.flex {
	display: flex;
	/deep/.ant-checkbox {
		vertical-align: text-top;
		margin-right: 10px;
	}
}
.mustIcon {
	/deep/.ant-form-item-label {
		label {
			&::before {
				display: inline-block;
				margin-right: 4px;
				color: #f5222d;
				font-size: 14px;
				font-family: SimSun, sans-serif;
				line-height: 1;
				content: '*';
			}
		}
	}
}
.row {
	display: flex;
	justify-content: space-around;
	margin-top: 15px;
}

.aid {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0px;
	left: 0px;
	z-index: 999;
}
.lef {
	/deep/.ant-input {
		border-radius: 0 4px 4px 0 !important;
	}
}
.aid {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0px;
	left: 0px;
	z-index: 999;
	.spin {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		/deep/.ant-spin-container {
			width: 100%;
			height: 100%;
			z-index: 999;
		}
		.spin-content {
			border: 1px solid #91d5ff;
			background-color: #e6f7ff;
			padding: 300px 0px 0;
			width: 100%;
			height: 100%;
			text-align: center;
		}
	}
}

.base {
	position: absolute;
	width: 768px;
	height: 90% !important;
	background: #fff;
	left: 50%;
	margin-left: -384px;
	top: 5% !important;
	// margin-top: -270px;
	overflow-y: auto;
	border-radius: 10px;
	.main {
		height: calc(~'100% - 50px');
		overflow-y: scroll;
		padding: 50px 20px 0;
	}

	/deep/.ant-form-item {
		// margin: 20px 50px;

		/deep/.ant-form-item-label {
			width: 100px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}

		/deep/.ant-form-item-control-wrapper {
			flex: 1;

			
		}
		/deep/.ant-calendar-picker,
		/deep/.ant-time-picker {
			width: 100%;
		}
	}
}
.gj {
	overflow: hidden;
	.tit {
		float: left;
		width: 80px;
	}
	.followContent {
		width: 600px;
		float: left;
		white-space: pre-line;
	}
	.cell {
		width: 140px;
		float: left;
	}
}
.imgArea {
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	margin: 0 12px 12px 0;
	width: 104px;
	height: 104px;
	position: relative;
	display: inline-block;

	.imgHandlerArea {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		transition: all 0.4s;
		font-size: 20px;
		text-align: center;
		z-index: -1;
	}

	&:hover {
		.imgHandlerArea {
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}
	}
}

.fileListArea {
	.ant-list-item {
		padding-top: 4px;
		padding-bottom: 5px;

		.ant-list-item-content {
			font-size: 12px;
		}
	}
}
</style>
